<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<!-- 准备好一个容器，承载整个react -->
	<div id="root"></div>

	<!-- react核心库 -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<!-- 支持react操作dom -->
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<!-- 将jsx转为js -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<!-- 对组件标签属性进行限制 -->
	<script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>

	<script type="text/babel">
		class Demo extends React.Component{
		render(){
			// 关于回调ref的说明
			// 	如果ref回调函数式以内联函数的方式定义的，在更新过程中它会执行两次，第一次传入参数null，然后第二次会传入参数DOM元素，
			// 	这是因为在每次渲染时会创建一个新的函数实例，所以React清空旧的ref并且设置新的。通过讲ref的回调函数定义成class的绑定
			// 	函数的方式可以避免上述问题，但大多数情况下它是无关紧要的
			return (
				<div>
					<input type="text" placeholder="点击按钮提示数据" ref={ dom => this.input1 = dom }/>
					<input type="button" value="点我提示左侧的数据" onClick={this.showData}/>
					{/*避免回调ref在更新时被调用两次的情况*/}
					<input type="text" placeholder="失去焦点提示数据" ref={ this.saveInput } onBlur={this.showData2}/>
				</div>
			)
		}
		showData = () => {
			alert(this['input1'].value)
		}
		showData2 = () => {
			alert(this['input2'].value)
		}
		saveInput = (dom) => {
			this.input2 = dom
		}
	}
	ReactDOM.render(<Demo/>, document.getElementById('root'))
	</script>
</body>

</html>